<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch Favicon</title>
</head>
<body>
    <input type="text" id="urlInput" placeholder="Enter website URL">
    <button id="fetchButton">Fetch Favicon</button>
    <div id="faviconContainer"></div>

    <script>
        document.getElementById('fetchButton').addEventListener('click', async () => {
            const url = document.getElementById('urlInput').value;
            if (!url) {
                alert('Please enter a valid URL');
                return;
            }

            try {
                // Fetch the HTML content of the website
                const response = await fetch('https://cors-anywhere.herokuapp.com/' + url);
                const html = await response.text();

                // Create a temporary DOM element to parse the HTML
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                console.log()

                // Find the favicon link element
                const iconLink = doc.querySelector("link[rel~='icon']") || doc.querySelector("link[rel~='shortcut icon']");

                if (iconLink) {
                    const iconUrl = iconLink.href;
                    displayFavicon(iconUrl);
                } else {
                    alert('Favicon not found');
                }
            } catch (error) {
                console.error('Error fetching favicon:', error);
                alert('Error fetching favicon. Check the console for more details.');
            }
        });

        function displayFavicon(iconUrl) {
            const faviconContainer = document.getElementById('faviconContainer');
            faviconContainer.innerHTML = `<img src="${iconUrl}" alt="Favicon">`;
        }
    </script>
</body>
</html>
